<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <el-card :body-style="{padding:'0px 0px 24px',backgroud:'#fff'}">
      <el-row style="width: 96%;margin:0px auto" :class="{cardBackColor:editOption}">
        <el-col style="padding: 16px 0px;margin-left:20px;text-align:left;color: #909399;" :span="15">
          <b>移交信息</b>
        </el-col>
        <div v-show="!editOption && editable" style="float: right;margin-right:20px;margin-bottom: 10px;padding: 16px 0px">
          <el-dropdown>
            <i class="joys-icon-fusionmenu" style="padding: 12px;cursor:pointer;border: 0px"/>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="edit()">编辑</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-row>
    </el-card>
    <el-card>
      <div style="width: 96%;margin:0px auto" :class="{cardBackColor:editOption}">
        <el-form inline
                 :model='customerTransfer'
                 :rules="rules"
                 ref='customerTransferRef'>
          <el-row>
            <el-col :md="12" :lg="8">
              <el-form-item label="移交后主办">
                <ft-transfer-user v-model="customerTransfer.mainManagerAfterId" @load="loadAfterUser"
                                  :editable="editOption" size="small"/>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item label="移交后协办">
                <ft-transfer-user v-model="customerTransfer.viceManagerAfterId" :editable="editOption" size="small"
                                  @change="viceAfterChange"/>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item label="移交后所属部门" style="float: right">
                {{this.afterDeptName}}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form>
          <hr v-show="editOption" style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>
          <el-row v-show="editOption">
            <div style="float: right;margin-right:20px;margin-bottom: 10px;padding: 16px 0px">
              <el-button @click="cancel" size="small">取消</el-button>
              <el-button type="primary" @click="saveTransfer()" size="small" :disabled="!editOption">保存</el-button>
            </div>
          </el-row>
        </el-form>
      </div>
      <el-row v-if="customerTransfer" style="padding: 16px 0px;text-align:center">
        <transfer-customer-list
          :customer-transfer-id="customerTransferId"
          :bill-status="customerTransfer.billStatus">
        </transfer-customer-list>
      </el-row>
    </el-card>
    <el-card>
      <div>
        <el-form inline style="width: 96%;margin:0px auto"
                 :model='customerTransfer' :class="{cardBackColor:reasonOption}"
                 ref='customerTransfer'>
          <el-row>
            <el-col style="padding: 16px 0px;margin-left:20px;text-align:left;color: #909399;" :span="15">
              <b>移交原因</b>
            </el-col>
            <div style="float: right;margin-right:20px;margin-bottom: 10px;padding: 16px 0px;height: 25px">
              <el-dropdown v-show="!reasonOption && editable">
                <i class="joys-icon-fusionmenu" style="padding: 12px;cursor:pointer;border: 0px"/>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="editReason()">编辑</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-row>
          <el-row>
            <el-col :span="8" style="width:95%;vertical-align: middle;">
              <el-input type="textarea" v-show="reasonOption" @input="descInput"
                        :autosize='{ minRows: 3, maxRows: 5}' maxlength="600"
                        v-model="customerTransfer.transferReason"
                        style="width:95%;text-align: center; vertical-align: middle;">
              </el-input>
              <br/>
              <span class="circle"></span><span class="text">限制{{remnant}}/600字以内</span>
              <div v-show="!reasonOption" style=" width:95%;margin-left: 2.5%;text-align: left;">
                <span>{{this.customerTransfer.transferReason}}</span>
              </div>
              <br/>
            </el-col>
          </el-row>
          <hr v-show="reasonOption" style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>
          <el-row v-show="reasonOption">
            <div style="float: right;margin-right:20px;margin-bottom: 10px;padding: 16px 0px">
              <el-button @click="cancelReason()" size="small">取消</el-button>
              <el-button type="primary" @click="saveReason()" size="small">保存</el-button>
            </div>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card>
      <div style="width: 96%; margin:0 auto;">
        <el-row style="padding: 16px 0px;text-align:center; ">
          <el-col style="padding: 16px 0px;margin-left:20px;text-align:left;color: #909399;" :span="15">
            <b>附件</b>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" style="width:98%;vertical-align: middle;">
            <ft-attach v-if="customerTransfer&&customerTransfer.customerTransferId" title="附件信息"
                       sourceType="customerTransfer" :sourceId="customerTransfer.customerTransferId"
                       :categories="attachClass"
                       :basePath="'/doc/generate/客户维护/'+customerTransfer.customerTransferId"></ft-attach>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>

  import FtUser from '../ft/FtUser'
  import FtInput from '../ft/FtInput'
  import TransferCustomerList from './TransferCustomerList'
  import FtTransferUser from "../ft/FtTransferUser";
  import {categories} from 'lss-ui/src/components/js/AttachClass'

  export default {
    name: 'CustomerTransferFlowForm',
    components: {FtTransferUser, FtUser, FtInput, TransferCustomerList},
    props: {
      busiDataId: {type: String},
    },
    mounted() {
      this.load()
      categories(this, 'AttachClass', rest => {
        this.attachClass = rest
      })
    },
    data() {
      return {
        //附件分类
        attachClass: [],
        opinionTags: ['有风险', '有错误'],
        // 客户移交记录主键
        customerTransferId: this.busiDataId,
        customerTransfer: {},
        afterDeptName: {
          type: String
        },
        mainManagerAfterId: '',
        //单据是否可以编辑
        editOption: false,
        editable:false,
        reasonOption: false,
        mainManagerAfterName: '',
        viceManagerAfterName: '',
        //倒计数
        remnant: 600,
        outTime: 0,
        rules: {
          mainManagerAfterId: [
            {required: true, message: '请输入移交后主办', trigger: 'blur'},
          ],
          viceManagerAfterId: [
            {required: true, message: '移交后协办', trigger: 'blur'},
          ],
        },
        // 提交按钮控制
        submitShow: false,
        // 审核按钮控制
        checkShow: false,
      }
    },
    methods: {
      //移交后协办
      viceAfterChange(item) {
        this.$set(this.afterDeptName = item.deptName)
      },
      loadAfterUser(item) {
        if (item)
          this.afterDeptName = item.deptName
      },
      //查询
      load() {
        if (this.customerTransferId) {//主键不为空，为查询详细
          this.$http.get('/joys-rest/lss-customer/transfer/' + this.customerTransferId
          ).then(resp => {
            this.customerTransfer = resp.body
            if(this.customerTransfer.billStatus =='INITIAL' || this.customerTransfer.billStatus =='REJECT'){
              this.editable=true
            }else{
              this.editable=false
            }
          }, resp => {
            this.$message.error(resp.body)
          })
        }
      },
      //保存
      save() {
        this.$http.put('/joys-rest/lss-customer/transfer/customer/save',
          this.customerTransfer
        ).then(resp => {
          this.customerTransfer = resp.body
          this.$message.success('保存成功!')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      saveTransfer() {
        this.save()
        this.editOption = false
      },
      //取消
      cancel() {
        this.editOption = false
        this.load()
      },
      //修改
      edit() {
        this.editOption = true
      },
      editReason() {
        this.reasonOption = true
      },
      cancelReason() {
        this.reasonOption = false
        this.remnant = 600
        this.load()
      },
      saveReason() {
        this.save()
        this.reasonOption = false
      },
      //移交
      transfer() {
        this.customerTransfer.billStatus = 'PASS'
        console.log(this.customerTransfer)
        this.$http.put('/joys-rest/lss-customer/transfer/customer/save',
          this.customerTransfer
        ).then(resp => {
          this.customerTransfer = resp.body
          this.editOption = false
          this.$message.success('移交成功!')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      // 提交
      submit() {
        if (!this.validateForm()) {
          return
        }
        this.$http.put('/joys-rest/lss-customer/transfer/submit/' + this.customerTransferId).then(
          resp => {
            this.submitShow = false
            this.checkShow = true
            this.$message.success('已提交！')
          },
          resp => {
            this.$message.error("提交失败！")
          }
        )
      },
      // 提交
      check() {
        if (!this.validateForm()) {
          return
        }
        this.$http.put('/joys-rest/lss-customer/transfer/check/' + this.customerTransferId).then(
          resp => {
            this.checkShow = false
            this.$message.success('已审核！')
          },
          resp => {
            this.$message.error("审核失败！")
          }
        )
      },
      //返回
      goBack() {
        this.$emit('returnList', {showType: 'table', activeName: this.activeName})
      },
      descInput() {
        var txtVal = this.customerTransfer.transferReason.length;
        this.remnant = 600 - txtVal;
      }
    },
  }

</script>

<style>
  .cardBackColor {
    background-color: #F4F8F9
  }
</style>
